<template>
  <!--  如果组件找不到要挂载的地方，就挂载到这里。这个组件是一个空的组件，并且被隐藏。 -->
  <div id="empty-slot" style="display: none"></div>
  <tool-bar class="tool-bar" v-if="showTopBar"></tool-bar>
  <flexible-layout
    class="main-window"
    layout-direction="horizontal"
    ref="main-layout"
    :name="root"
    :components="components"
  />
  <slot name="layout-contents">当没有插入值的时候，则会出现</slot>
  <float-window-manager ref="float-window-manager"></float-window-manager>
</template>

<script lang="ts">
import { store } from "./store";
import { nanoid } from "nanoid";
import { defineComponent, PropType } from "vue";
import LayoutContent from "./LayoutContent.vue";
import FlexibleLayout from "./FlexibleLayout.vue";
import { statusCenter } from "../scripts/status";
import { LayoutItemComponent } from "../scripts/models";

import LayoutItem from "./LayoutItem.vue";
import FloatWindowManager from "./FloatWindowManager.vue";
import { FlexibleLayoutModel, FlexibleLayoutItemModel } from "./models";
import ToolBar from "./ToolBar.vue";

const storeLayout = true;
statusCenter.registerVueComponent("flexible-layout", FlexibleLayout);
statusCenter.registerVueComponent("layout-item", LayoutItem);

export default defineComponent({
  name: "MainWindow",
  components: {
    FlexibleLayout,
    FloatWindowManager,
    ToolBar,
  },
  emits: ["hidden-targets-changed"],
  props: {
    initialLayout: Array as PropType<
      Array<FlexibleLayoutModel | FlexibleLayoutItemModel>
    >,
    initialWindows: Array as PropType<FlexibleLayoutItemModel[]>,
    initialHiddens: {
      type: Array as PropType<LayoutItemComponent[]>,
      default: () => [],
    },
    storeLayout: { type: Boolean, default: false },
    showTopBar: { type: Boolean, default: true },
  },
  computed: {
    hiddenTargets: () => {
      return store.state.hiddenTargets;
    },
  },
  watch: {
    hiddenTargets: {
      deep: true,
      handler: function () {
        const l = []
        for(const k of this.hiddenTargets){
          l.push(k)
        }
        this.$emit("hidden-targets-changed", l);
      },
    },
  },
  mounted() {
    const fwm = this.$refs["float-window-manager"] as any;
    console.log("fwm", fwm);
    if (fwm == null) {
      return;
    }
    for (const w of this.windows) {
      fwm.addComponent(w);
    }

    window.setInterval(() => {
      const mainLayout = this.$refs["main-layout"] as any;
      const fwm = this.$refs["float-window-manager"] as any;
      if (mainLayout != null) {
        const windows = fwm.dumpWindows();
        const hiddens: LayoutItemComponent[] = [];
        store.state.hiddenTargets.forEach((hiddenName: string) => {
          hiddens.push(statusCenter.getLayoutComponent(hiddenName)!);
        });
        localStorage.setItem(
          "layout",
          JSON.stringify({
            layout: mainLayout.dumpLayout(),
            windows,
            hidden: hiddens,
          })
        );
      }
    }, 3000);
  },
  data() {
    let data = {
      windows: this.initialWindows,
      layout: this.initialLayout,
      hidden: this.initialHiddens,
    };
    if (this.storeLayout && localStorage.getItem("layout")) {
      data = JSON.parse(localStorage.getItem("layout")! as any);
    }
    if (data.windows == null) {
      data.windows = [];
    }
    if (data.layout == null) {
      data.layout = [];
    }
    if (data.hidden != null) {
      for (const hiddenItem of data.hidden) {
        if (hiddenItem == null) {
          continue;
        }
        statusCenter.setLayoutComponent(hiddenItem.name, hiddenItem);
        store.commit("hideTarget", hiddenItem.name);
      }
    }
    return {
      windows: data.windows as FlexibleLayoutItemModel[],
      components: data.layout as Array<
        FlexibleLayoutModel | FlexibleLayoutItemModel
      >,
      store,
    };
  },
});
</script>

<style>
.main-window {
  height: 100%;
  width: 100%;
}
:root {
  --pwm-title-background-color: #c6e2ff;
  --pwm-background-color: #ecf5ff;
  --pwm-title-height: 32px;
}
</style>
